<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.Switch {
				padding: 0;
				width: 500px;
				margin: auto;
			}
 
			.Switch li {
				clear: both;
				line-height: 44px;
				border-bottom: 1px solid #CCC;
				list-style: none;
			}
 
			.Switch input {
				display: none
			}
 
			.Switch label {
				width: 52px;
				background: #CCC;
				height: 28px;
				border-radius: 14px;
				float: right;
				margin: 8px 10px 0 0;
				box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
				cursor: pointer;
			}
 
			.Switch label em {
				width: 26px;
				height: 26px;
				float: left;
				margin: 1px;
				border-radius: 13px;
				box-shadow: 2px 3px 8px rgba(0, 0, 0, .1);
				background: #FFF;
			}
 
			.Switch input:checked+label {
				background: #a4d714;
			}
 
			.Switch input:checked+label em {
				float: right;
			}
 
			.Switch input:disabled+label {
				opacity: 0.5
			}
		</style>
	</head>
	<body>
		<ul class="Switch">
			<li>
				<input type="checkbox" name="Storage" id="date">
				默认关闭
				<label for="date"><em></em></label>
			</li>
			<li>
				<input type="checkbox" name="Storage2" id="blance" checked="">
				默认打开
				<label for="blance"><em></em></label>
			</li>
			<li>
				<input type="checkbox" name="Storage2" id="integral" disabled="">
				不可用
				<label for="integral"><em></em></label>
			</li>
		</ul>
	</body>
</html>